<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        html,body,.map{
            width: 100%;
            background:white!important;
            height: 100%;
            margin: 0px;
        }
        .input-card {
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 22rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            bottom: 1rem;
            right: 5rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
        }
        #abc{
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 22rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            top: 1rem;
            left: 1rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
        }
    </style>
    <title>好马科技全国分公司分布图</title>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<div id="abc">
    <h4>
        <div style="float: left;width: 15%;"><img src="img/logo.png" style="width: 35px;"></div>
        <div style="float: left;width: 85%;">好马科技全国分公司分布图</div>
    </h4>
</div>
<div id="" class="input-card">
    <h4>
        <div style="float: left;width: 15%;"><img src="img/logo.png" style="width: 35px;"></div>
        <div style="float: left;width: 85%;">好马科技</div>
    </h4>
    <div class="input-item" style="margin-bottom: 10px;">
        <div style="float: left;width: 15%;"><img src="img/xiaohongqi.png" style="width: 35px;"></div>
        <div style="float: left;width: 85%;">全国66家分公司分布图</div>
    </div>
    <div class="input-item" style="margin-bottom: 10px;">
        <div style="float: left;width: 15%;"><img src="img/xingxing.png" style="width: 35px;"></div>
        <div style="float: left;width: 85%;">已获取运营牌照的分公司：合肥，成都，武汉，南充，遂宁，资阳，六盘水，阜阳，蚌埠，六安，安庆，桐城，淮南</div>
    </div>
    <div class="input-item" style="margin-bottom: 10px;">
        <div style="float: left;width: 15%;"><img src="img/quanquan.png" style="width: 35px;"></div>
        <div style="float: left;width: 85%;">正在获取运营牌照的分公司：北京，重庆，昆明，西安，广州，温州</div>
    </div>
</div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6d834de96b8b89cdaa744cf1558226e3&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
<script type="text/javascript">

    var SOC = 'CHN'
    var colors = {};
    var GDPSpeed = {
        '520000':10,//贵州
        '540000':10,//西藏
        '530000':8.5,//云南
        '500000':8.5,//重庆
        '360000':8.5,//江西
        '340000':8.0,//安徽
        '510000':7.5,//四川
        '350000':8.5,//福建
        '430000':8.0,//湖南
        '420000':7.5, //湖北
        '410000':7.5,//河南
        '330000':7.0,//浙江
        '640000':7.5,//宁夏
        '650000':7.0,//新疆
        '440000':7.0,//广东
        '370000':7.0,//山东
        '450000':7.3,//广西
        '630000':7.0,//青海
        '320000':7.0,//江苏
        '140000':6.5,//山西
        '460000':7,// 海南
        '310000':6.5,//上海
        '110000':6.5, // 北京
        '130000':6.5, // 河北
        '230000':6, // 黑龙江
        '220000':6,// 吉林
        '210000':6.5, //辽宁
        '150000':6.5,//内蒙古
        '120000':5,// 天津
        '620000':6,// 甘肃
        '610000':8.5,// 甘肃
        '710000':2.64, //台湾
        '810000':3.0, //香港
        '820000':4.7 //澳门

    }
    var getColorByDGP = function(adcode){
        if(!colors[adcode]){
            var gdp = GDPSpeed[adcode];
            if(!gdp){
                colors[adcode] = 'rgb(227,227,227)'
            }else{
                var r = 3;
                var g = 140;
                var b = 230;
                var a = gdp/10;
                colors[adcode] = 'rgba('+ r +','+ g +','+b+','+a+')';
            }
        }
        return colors[adcode]
    }

    var disCountry = new AMap.DistrictLayer.Country({
        zIndex:10,
        SOC:'CHN',
        depth:1,
        styles:{
            'nation-stroke':'#ff6600',
            'coastline-stroke':'ff8800',
            'province-stroke':'white',
            'fill':function(props){
                return getColorByDGP(props.adcode_pro)
            }
        }
    })

    var map = new AMap.Map("container",{
        zooms: [4, 10],
        center:[106.122082,33.719192],
        zoom: 4,
        isHotspot:false,
        defaultCursor:'pointer',
        layers:[
            disCountry
        ],
        viewMode:'2D',
        resizeEnable: true
    })
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.ToolBar({liteStyle:true}));
    map.on('complete',function(){
        var layer = new AMap.LabelsLayer({
            // 开启标注避让，默认为开启，v1.4.15 新增属性
            collision: false,
            // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
            animation: true,
        });
        for (var i = 0; i < LabelsData.length; i++) {
            var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
            layer.add(labelsMarker);
        }
        map.add(layer);
    })

    // 构造点标记
    //var img="img/xiaohongqi.png";
    var img2=new AMap.Icon({
        image: "img/xiaohongqi.png",
        size: new AMap.Size(32, 32),  //图标大小
        imageSize: new AMap.Size(26,26)
    }) ;
    var img1=new AMap.Icon({
        image: "img/xingxing.png",
        size: new AMap.Size(32, 32),  //图标大小
        imageSize: new AMap.Size(26,26)
    }) ;

    /*var marker1=[
        ["成都",104.066143,30.573095],
        ["南充",106.082974,30.795282],
        ["遂宁",105.571331,30.513311],
        ["资阳",105.641917,30.122211],
        ["武汉",114.305215,30.592935],
        ["合肥",117.227308,31.82057],
        ["阜阳",115.819729,32.896969],
        ["蚌埠",117.363228,32.939667],
        ["六安",116.507676,31.752889],
        ["安庆",117.043551,30.50883],
        ["淮南",116.999933,32.625478]
    ];
    var markers_arr = [];
    for(var i=0;i<marker1.length;i++){
        var lnglat = marker1[i];
        var marker_s = new AMap.Marker({
            icon: img1,
            position: [lnglat[1], lnglat[2]],
            label: {'offset': new AMap.Pixel(20, 20), 'content': lnglat[0]}
        });
        //map.add(marker_s);
        markers_arr.push(marker_s);
    }
    var overlayGroups = new AMap.OverlayGroup(markers_arr);
    map.add(overlayGroups);*/

    /*var marker2=[
        ["襄阳",112.144146,32.042426],
        ["温州",120.672111,28.000575],
        ["北京",116.322056,39.89491],
        ["芜湖",118.376451,31.326319],
        ["南通",120.864608,32.016212],
        ["临沂",118.326443,35.065282],
        ["兰州",103.834249,36.06081],
        ["厦门",118.110221,24.490474],
        ["太湖",120.284337,31.261744],
        ["泉州",118.675847,24.87435],
        ["张家界",110.479921,29.127401],
        ["枣庄",117.557964,34.856424],
        ["绵阳",104.741722,31.46402],
        ["南阳",112.540918,32.999082],
        ["宿州",116.984084,33.633891],
        ["德阳",104.398651,31.127991],
        ["泸州",110.479921,29.127401],
        ["西安",108.939621,34.343147],
        ["贵阳",106.630153,26.647661],
        ["福州",119.296389,26.074268],
        ["池州",117.489157,30.656037],
        ["佛山",113.122717,23.028762],
        ["桐城",116.97412,31.0358],
        ["丽水",119.921786,28.451993],
        ["深圳",114.085947,22.547],
        ["凉山州",102.258746,27.886762],
        ["石台",117.486306,30.210313],
        ["安康",109.029273,32.6903],
        ["六盘水",104.846743,26.584643],
        ["内江",105.057987,29.580148],
        ["乐山",103.761263,29.582024],
        ["营山",106.56542,31.076461],
        ["盐城",120.139998,33.377631],
        ["恩施",109.48699,30.283114],
        ["马鞍山",118.506502,31.669611],
        ["广元",105.829757,32.433668],
        ["宜宾",104.630825,28.760189],
        ["昆明",102.833722,24.881539],
        ["宜城",112.256718,31.720573],
        ["怀宁",116.829475,30.733825],
        ["铜川",108.979608,34.916582],
        ["秦皇岛",119.586579,39.942531],
        ["宜昌",111.286451,30.69187],
        ["眉山",103.831788,30.048318],
        ["广州",113.264385,23.129112],
        ["苏州",120.619585,31.299379],
        ["宿松",116.129105,30.153746],
        ["珠海",113.553986,22.224979],
        ["潜山",116.58127,30.631129],
        ["巴中",106.753669,31.858809],
        ["重庆",106.550464,29.563761],
        ["达川区",107.511985,31.196365]
    ];*/
    var marker2={$arr};
    for(var i=0;i<marker2.length;i++){
        var lnglat = marker2[i];
        var marker_s = new AMap.Marker({
            icon: img2,
            position: [lnglat[1],lnglat[2]],
            label: {'offset': new AMap.Pixel(20, 20), 'content': lnglat[0]}
        });
        map.add(marker_s);
    }
    map.setFitView();

</script>
</body>

</html>